<template>
  <view class="container">
    <!-- <view>sdf</view> -->
    <view class="title_view" :style="'height:' + titleHeight + 'px;z-index:1'">
      <!-- sdfsdf -->
      <view class="title bh-row bh-justify-space-between " :style="'height:' + titleHeight + 'px;padding-top:' + capsuleTop + 'px'">
        <view class="left_arrow_box" @click="back">
          <image src="../../static/images/white_left_arrow.svg" mode=""></image>
        </view>
        <view class="edit-info">店铺详情</view>
        <view class="" style="width: 80rpx;"></view>
      </view>
    </view>
    <uni-swiper-dot :info="images" :current="current" field="content" mode="round" :dotsStyles="dotsStyle" style="position: relative;">
      <swiper class="swiper-box" @change="change" style="height: 576rpx;">
        <swiper-item v-if="postDto.shopVideo" style="height: 100%">
          <view style="height: 100%;">
            <video style="height: 100%;width: 100%;" :src="postDto.shopVideo" />
          </view>
        </swiper-item>

        <swiper-item v-for="(item, index) in images" :key="index" style="height: 100%">
          <view>
            <image @click="previewPostImg(postDto, index)" :src="item" mode="widthFix" style="width: 100%;height: 100%" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <view class="post-detail">
      <view></view>
      <!-- <image src="../../static/images/home/home_post_item.png" class="post-detail-img" mode="scaleToFill" /> -->
      <!-- <view class="post-detail-title-mask">
        <view class="post-detail-title">回龙观餐厅转让</view>
        <view class="post-detail-sub-title">昌平区 回龙观龙腾路 15m2</view>
      </view> -->
      <!-- <view class="post-detail-img-label">老板直租</view> -->
      <view class="bh-row bh-justify-space-between">
        <view class="detail-title bh-flex-1">{{ title }}</view>
        <!-- <view v-if="postDto.metricRecordDtoMap.collect != 1" @click="confirmCollect" class="detail-collect-wrap bh-row bh-justify-space-between">
          <view class="detail-collect-title">收藏</view>
          <image class="detail-collect" src="../images/detail/collect.svg" mode="scaleToFill" />
        </view> -->
        <!-- <view v-if="postDto.metricRecordDtoMap.collect == 1" @click="cancelCollect" class="detail-collect-wrap bh-row bh-justify-space-between">
          <view class="detail-collect-title">收藏</view>
          <image class="detail-collect" src="../images/detail/collected.svg" mode="scaleToFill" />
        </view> -->
      </view>
      <view class="post-detail-img-sc"></view>
      <!-- <view class="post-detail-money-wrap bh-row bh-justify-start bh-align-center">
        <view class="post-detail-money-label">租</view>
        <view class="post-detail-money">{{ postDto.rent }}</view>
        <view class="post-detail-money-unit">/月</view>
        <view class="post-detail-money-label">转</view>
        <view class="post-detail-money">{{ postDto.transferFee }}</view>
        <view class="post-detail-money-unit">/万</view>
        <view class="post-detail-view bh-flex-1">
          {{ postDto.createTimeDesc }}&nbsp;|&nbsp;{{ postDto.viewNumber }}浏览量
        </view>
      </view> -->

      <view class="post-detail-money-wrap bh-row bh-justify-start bh-align-center">
        <view class="post-detail-money-label">租</view>
        <view class="post-detail-money">{{ getSimpleAmount(postDto.rent) }}</view>
        <view class="post-detail-money-unit">/月</view>
        <view class="post-detail-money-label">转</view>
        <view class="post-detail-money">{{ postDto.transferFee ? getFixedUnit : '面议' }}</view>
        <!-- <view class="post-detail-money-unit">{{ postDto.transferFee ? '/万' : '' }}</view> -->
        <view class="post-detail-view bh-flex-1">
          {{ postDto.createTimeDesc }}&nbsp;|&nbsp;{{ postDto.viewNumber }}浏览量
        </view>
      </view>

      <view v-if="postDto.labelDtoList && postDto.labelDtoList.length > 0" class="post-detail-label-wrap bh-row bh-justify-start bh-align-center">
        <view v-for="(item1, index1) in postDto.labelDtoList" :key="index1" class="post-detail-label">{{ item1.labelName }}</view>
        <!-- <view class="post-detail-label">临近学校</view>
        <view class="post-detail-label">月利润100万</view>
        <view class="post-detail-label">精装修</view> -->
      </view>
      <view class="post-detail-location-wrap">
        <image src="../images/detail/pingfangmi.svg" mode="scaleToFill" class="post-detail-location-icon" />
        <view class="post-detail-location">{{ postDto.acreage }}m2</view>
      </view>
      <view class="post-detail-location-wrap">
        <image src="../images/detail/pingfangmi.svg" mode="scaleToFill" class="post-detail-location-icon" />
        <view class="post-detail-location">{{ postDto.city }}{{ postDto.area }}</view>
      </view>
      <view class="post-detail-location-wrap">
        <image src="../images/detail/pingfangmi.svg" mode="scaleToFill" class="post-detail-location-icon" />
        <view class="post-detail-location">{{ postDto.address }}</view>
      </view>

      <!-- <view class="map-container" style="position: relative;"  @tap="toMapDetail">
        <map id="mapSelected" enable-scroll="true" :enable-zoom="false" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude" :markers="mapInfo.makers" :controls="controls" :scale="18" @controltap="controltap" @regionchange="regionchange"></map>

        <view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1);"></view>
      </view> -->
      <view class="map-container" style="position: relative;" @tap="toMapDetail">
        <map id="mapSelected" enable-scroll="true" :enable-zoom="false" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude" :markers="mapInfo.makers" :controls="controls" :scale="18" @controltap="controltap" @regionchange="regionchange"></map>

        <!-- 添加蒙层 -->
        <view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1);">
        </view>
      </view>

      <!-- <view class="map-container">
        <view style="border-radius: 8rpx;">
          <map id="mapSelected" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude" :markers="mapInfo.makers" :controls="controls" :scale="18" @controltap="controltap" @tap="clickMap" @regionchange="regionchange"></map>
        </view>
      </view> -->

      <view class="post-detail-comment-wrap bh-row bh-justify-start bh-align-center">
        <view class="post-detail-comment-nick">老板说:</view>
        <view class="post-detail-comment-content">{{ postDto.content ? postDto.content : '~' }}</view>
      </view>
      <view style="height: 144rpx;"></view>
      <view class="footer">
        <!-- <view class="avatar"></view> -->
        <image class="avatar" style="display:block" :src="postDto.userDto.avatarUrl" mode="scaleToFill" />
        <view class="nickname-wrap">
          <view class="nickname">{{ postDto.userDto.nickName }}</view>
          <view class="nickname-label">
            <image class="label-icon" src="../images/detail/renzheng.svg" mode="scaleToFill" />
            <view class="label-title">店主认证</view>
          </view>
        </view>
        <view class="bh-row bh-justify-end bh-flex-1">
          <view class="comment" @click="toComment">去审核</view>
          <view class="contact" @click="toConfigPost">个性化设置</view>
        </view>
        <!-- <image
          src="../images/detail/location.png"
          mode="scaleToFill"
        /> -->

      </view>
    </view>
    <!-- <show-add-comment-sheet ref="textarea1" :show="showAddComment" @close="() => { this.showAddComment = false }" :init-value="commentContent" @confirm="addComment" @change="changeComment"></show-add-comment-sheet> -->
    <show-audit-sheet v-if="showAddComment" :show="showAddComment" @close="() => { this.showAddComment = false }" :init-value="postDto.id" :init-post="postDto" @confirm="addComment"></show-audit-sheet>
  </view>
</template>

<script lang="ts">
import { Api } from '../../api/api'
import { Dict } from '../../components/custom_views/dict'
import uniSwiperDot from '@dcloudio/uni-ui/lib/uni-swiper-dot/uni-swiper-dot.vue';
import { commonMixin } from '../../components/custom_views/mixin';
import { CustomDict } from '../../components/custom_views/custom_dict';
import { PostUtils } from '@/components/post_item/post_add_sell_dto';
import showAddCommentSheet from '@/PostPage/custom_views/show-add-comment-sheet.vue';
import showAuditSheet from '../../components/custom_views/show-audit-sheet.vue';
import check_utils from '../../components/custom_views/check_utils';

export default {
  components: {
    uniSwiperDot,
    showAddCommentSheet,
    showAuditSheet
  },
  mixins: [
    commonMixin
  ],
  data() {
    return {
      capsuleHeight: 0,
      capsuleTop: 0,
      titleHeight: 0,
      postDto: {
      },
      dotsStyle: {
        bottom: 12,
        backgroundColor: 'rgba(255, 255, 255, 0.55)',
        selectedBackgroundColor: 'background: rgba(255, 255, 255, 0.55)'
      },
      showAddComment: false,
      commentContent: '',
      // 地图信息
      latitude: 39.909, // 默认纬度
      longitude: 116.39742, // 默认经度(北京天安门)
      covers: [{
        id: 110,
        latitude: 39.909,
        longitude: 116.39742,
        iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
        width: "20",
        height: "20"
      }],
      controls: [{ // 控件
        id: 99,
        position: { // 控件位置
          left: 160,
          top: 120
        },
        iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
      }],
    }
  },
  computed: {
    images() {
      return PostUtils.getAllPicOfPost(this.postDto)
      // let images = []
      // if (this.postDto.facadePicture) {
      //   images.push(this.postDto.facadePicture.split(','))
      // }
      // console.log('images图片信息', images)
      // return images
    },
    mapInfo() {
      return {
        longitude: this.postDto.lng,
        latitude: this.postDto.lat,
        makers: [{
          id: 110,
          latitude: 39.949570,
          longitude: 116.451019,
          // iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
          iconPath: '@/static/images/detail/location.png',
          width: "20",
          height: "20"
        }]
      }
    },
    title() {
      let industryName = CustomDict.getDictName(this.postDto.industryId, Dict.IndustryTypeEnum)
      console.log('解析出行业名称', this.postDto.industryId, industryName)
      return this.postDto.area + this.postDto.street + industryName + '转店'
    },
    content() {
      PostUtils.getContentByLen(100, this.postDto)
    },
    getFixedUnit() {
      return CustomDict.getSimpleRent(this.postDto.transferFee)
      // let fixed= components_custom_views_custom_dict.CustomDict.getSimpleRent(this.postDto.transferFee)
      // return fixed
    }
  },
  methods: {
    toMapDetail() {
      // let detailJson = encodeURIComponent(JSON.stringify(this.postDto))
      // uni.navigateTo({
      //   url: '../detail_map/detail_map?detailJson=' + detailJson + '&postId=' + this.postDto.id
      // })
      let lat = Number(this.postDto.lat);
      let lon = Number(this.postDto.lng);
      var that = this
      wx.openLocation({
        latitude: lat,
        longitude: lon,
        name: that.postDto.area + that.postDto.address,
      })
    },
    toComment() {
      this.showAddComment = true
      // this.commentContent = ''
      // this.$nextTick(() => {
      //   this.$refs.textarea1.focusInput();
      // });
    },
    addComment(postStatus) {
      let that = this
      console.log('审核结果', postStatus)
      this.showAddComment = false
      // Api.auditPostId = this.postDto.id
      // const pages = getCurrentPages();
      // const beforePage = pages[pages.length - 2];
      uni.navigateBack({
        delta: 1,
        success() {
        }
      })
    },
    confirmCollect() {
      let that = this
      uni.requestSubscribeMessage({
        tmplIds: ['SatyFF0dG2Asi3caTX8tVOT_GtnObUhOSEH945zpuOc'],
        success(collectRes) {
          console.log('允许订阅收藏通知提醒消息', collectRes)
          Api.MetricRecordApi.updateCollect(that, that.postDto.id, '1', (res) => {
            if (res.code == 200) {
              that.postDto.metricRecordDtoMap.collect = 1
            }
          }, false)
        },
        fail(err) {
          console.log('允许订阅收藏通知提醒消息返回异常', err)
          Api.MetricRecordApi.updateCollect(that, that.postDto.id, '1', (res) => {
            if (res.code == 200) {
              that.postDto.metricRecordDtoMap.collect = 1
            }
          }, false)
        }
      })

    },
    cancelCollect() {
      let that = this
      uni.showModal({
        title: '取消收藏',
        content: '是否取消收藏',
        cancelColor: '#FF6430',
        showCancel: true,
        cancelText: '取消',
        confirmColor: '#666666',
        confirmText: '确定',
        success: function (res) {
          if (res.confirm) {
            console.log('点击了确定', res)
            Api.MetricRecordApi.updateCollect(that, that.postDto.id, '0', (res) => {
              if (res.code == 200) {
                that.postDto.metricRecordDtoMap.collect = 0
              }
            }, false)
          } else if (res.cancel) {
            console.log('用户取消注销');
          }
        }
      })

    },
    back() {
      uni.navigateBack()
    },

    initDetail(options) {
      console.log('初始化参数', options)
      let that = this
      if (options.detailJson && false) {

        this.postDto = JSON.parse(decodeURIComponent(options.detailJson))
        this.postDto.viewNumber = this.postDto.viewNumber ? (this.postDto.viewNumber + 1) : 1
        //添加足迹信息和更新浏览量
        Api.FootprintsApi.add(this.postDto.id, (footRes) => {
        }, false)
        Api.MetricRecordApi.updateViewNumber(that, { id: this.postDto.id, viewNumber: this.postDto.viewNumber }, (viewRes) => {
        }, false)
      } else if (options.postId) {
        Api.PostApi.detail(options.postId, (res) => {
          if (res.code == 200) {
            // res.data.viewNumber = res.data.viewNumber ? (res.data.viewNumber + 1) : 1
            that.postDto = res.data
            // //添加足迹信息和更新浏览量
            // Api.FootprintsApi.add(options.postId, (footRes) => {
            // }, false)
            // Api.MetricRecordApi.updateViewNumber(that, { id: res.data.id, viewNumber: res.data.viewNumber }, (viewRes) => {
            // }, false)
          }
        })
      } else {
        console.log('发帖详情参数错误', options)
      }
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.initDetail(options)
    let capsule = uni.getMenuButtonBoundingClientRect()
    this.capsuleTop = capsule.top
    console.log(capsule)
    this.capsuleHeight = capsule.height
    this.titleHeight = capsule.height + 10 + capsule.top
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>
<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
  height: 100vh;
}

.container {
  background-color: #F5F9FA;
  width: 100%;
  height: 100vh;
  // position: absolute;
  top: 0;
  overflow: scroll;
}

.title_view {
  position: absolute;
  right: 0;
  left: 0;

  .title {

    font-size: 32rpx;
    font-weight: 500;
    text-align: center;

    color: #FFFFFF;
    height: 40rpx;
    padding: 0 30rpx 10px 30rpx;
    box-sizing: border-box;
    // background: linear-gradient(171deg, #FFF6D4 19%, #F5F9FA 50%);
    // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0.7) 84%);
    width: 100%;
    // position: fixed;
    top: 0;
    left: 0;

    .left_arrow_box {
      width: 80rpx;
      height: 80rpx;

      image {
        width: 22rpx;
        height: 38rpx;
        margin: 21rpx 0;
      }
    }
  }
}




.post-detail {
  border-top-left-radius: 44rpx;
  border-top-right-radius: 44rpx;
  padding-top: 44rpx;
  background: #FFFFFF;
  // padding-bottom: 1rpx;
  position: relative;
  top: -44rpx;
  width: 100%;
  // height: 546px;
  opacity: 1;

  background: #FFFFFF;

  .detail-title {
    // margin-top: 52rpx;
    margin-left: 48rpx;
    font-size: 40rpx;
    font-weight: 600;

    color: rgba(0, 0, 0, 0.85);
  }

  .detail-collect-wrap {
    border-radius: 200rpx;

    box-sizing: border-box;
    border: 1px solid #000000;
    padding: 10rpx 20rpx;
    margin-right: 32rpx;

    .detail-collect-title {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 16rpx;
    }

    .detail-collect {
      width: 24rpx;
      height: 22.6rpx;
    }
  }

  .post-detail-money-wrap {
    margin-top: 32rpx;

    .post-detail-money-label {
      margin-left: 32rpx;
      border-radius: 4rpx;
      padding: 4rpx 4rpx 6rpx 4rpx;
      box-sizing: border-box;
      border: 1px solid #F87147;

      font-size: 24rpx;
      font-weight: normal;

      color: #F87147;
    }

    .post-detail-money {
      margin-left: 16rpx;
      font-weight: bold;
      color: #EF2D2D;

      /* 20000 */
      font-weight: 700;
      font-size: 36rpx;
    }

    .post-detail-money-unit {
      color: #EF2D2D;
      font-weight: 400;
      font-size: 24rpx;
    }

    .post-detail-view {
      flex: 1;
      text-align: right;
      margin-right: 32rpx;
      font-size: 28rpx;
      font-weight: normal;
      color: #999999;
    }
  }

  .post-detail-label-wrap {
    margin-top: 32rpx;
    margin-top: 32rpx;

    .post-detail-label {
      margin-left: 32rpx;
      border-radius: 12rpx;
      padding: 8rpx 16rpx;
      // border: 1px solid #F87147;
      font-size: 24rpx;
      font-weight: 500;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.5);
      border-radius: 4rpx;
      opacity: 1;

      background: #F5F6F6;
    }
  }

  .post-detail-location-wrap {
    display: flex;
    justify-content: flex-start;
    margin-left: 54rpx;
    margin-top: 46.9rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    align-items: center;

    .post-detail-location-icon {
      width: 32rpx;
      height: 33.5rpx;
      display: block;
    }

    .post-detail-location {
      margin-left: 19rpx;

    }
  }

  .map-container {
    // height: 400rpx;
    // display: flex;
    // justify-content: center;
    // margin-top: 30rpx;

    position: relative;
    text-align: center;
    margin: auto;
    /* margin-left: 30rpx; */
    /* margin-right: 30rpx; */
    width: 300px;
  }

  .post-detail-comment-wrap {
    margin-left: 16rpx;
    margin-right: 16rpx;
    margin-top: 32rpx;
    margin-bottom: 32rpx;
    padding: 28rpx 20rpx;
    border-radius: 16rpx;

    background: #F5F6F6;

    .post-detail-comment-nick {
      font-weight: 500;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.75);
    }

    .post-detail-comment-content {
      font-weight: 500;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.5);
    }
  }

  .footer {
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    height: 144rpx;
    opacity: 1;

    background: #FFFFFF;

    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .avatar {
      margin-left: 32rpx;
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;

      box-sizing: border-box;
      // border: 1px solid #F8D247;
    }

    .nickname-wrap {
      margin-left: 20rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      .nickname {}

      .nickname-label {
        border-radius: 200rpx;
        opacity: 1;

        box-sizing: border-box;
        border: 1px solid #F87147;
        padding: 6rpx 14rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;

        .label-icon {
          display: block;
          width: 16.7rpx;
          height: 16rpx;
        }

        .label-title {
          font-size: 20rpx;
          font-weight: normal;
          color: #F87147;
          margin-left: 2.5rpx;
        }
      }
    }

    .comment {
      padding: 18rpx 32rpx;
      margin-right: 16rpx;
      border-radius: 8rpx;
      opacity: 1;

      background: #F8D247;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }

    .contact {
      padding: 18rpx 46rpx;
      margin-right: 16rpx;
      border-radius: 8rpx;
      opacity: 1;

      background: #F87147;
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>